<script setup>
import { ref } from 'vue'

// 导航菜单项
const navItems = [
  { id: 'products', name: '产品介绍' },
  { id: 'industry', name: '行业现状' },
  { id: 'advantages', name: '产品优势' },
  { id: 'cases', name: '客户案例' },
  { id: 'investors', name: '投资方' },
  { id: 'team', name: '创始团队' },
  { id: 'contact', name: '请求试用' },
]

// 滚动到指定区域
const scrollToSection = (id) => {
  const element = document.getElementById(id)
  if (element) {
    const header = document.querySelector('header')
    if (header) {
      const headerHeight = header.offsetHeight
      const elementPosition = element.offsetTop
      const offsetPosition = elementPosition - headerHeight

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      })
    } else {
      element.scrollIntoView({ behavior: 'smooth' })
    }
  }
}

// 移动端菜单状态
const mobileMenuOpen = ref(false)
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}
</script>

<template>
  <!-- 导航栏 -->
  <header class="sticky top-0 bg-white shadow-sm z-50 w-full">
    <div class="w-full max-w-[2000px] mx-auto px-4 md:px-8 lg:px-16 py-3 flex justify-between items-center">
      <!-- Logo -->
      <div class="flex items-center">
        <div class="text-2xl font-bold text-gray-900">DeepNow</div>
      </div>

      <!-- 桌面导航 -->
      <nav class="hidden lg:flex items-center">
        <a v-for="(item, index) in navItems" :key="item.id" href="javascript:void(0)" @click="scrollToSection(item.id)"
          :class="[
            'px-4 py-2 rounded-lg font-medium transition-all duration-200',
            index > 0 ? 'ml-2' : '',
            item.id === 'contact'
              ? 'text-white hover:opacity-90 !ml-6'
              : 'text-gray-600 hover:bg-gray-100'
          ]" :style="item.id === 'contact' ? { backgroundColor: 'rgb(5, 198, 141)' } : {}"
          @mouseenter="item.id !== 'contact' ? $event.target.style.color = 'rgb(5, 198, 141)' : null"
          @mouseleave="item.id !== 'contact' ? $event.target.style.color = '' : null">
          {{ item.name }}
        </a>
      </nav>

      <!-- 移动端菜单按钮 -->
      <button class="lg:hidden text-gray-600" @click="toggleMobileMenu">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path v-if="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16m-7 6h7"></path>
          <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- 移动端下拉菜单 -->
    <div v-if="mobileMenuOpen" class="lg:hidden bg-white border-t border-gray-200">
      <div class="max-w-7xl mx-auto px-4 md:px-8 lg:px-16 py-4 space-y-2">
        <a v-for="item in navItems" :key="item.id" href="javascript:void(0)"
          @click="scrollToSection(item.id); mobileMenuOpen = false" :class="[
            'block px-4 py-3 rounded-lg font-medium transition-all duration-200',
            item.id === 'contact'
              ? 'text-white hover:opacity-90'
              : 'text-gray-600 hover:bg-gray-100'
          ]" :style="item.id === 'contact' ? { backgroundColor: 'rgb(5, 198, 141)' } : {}"
          @mouseenter="item.id !== 'contact' ? $event.target.style.color = 'rgb(5, 198, 141)' : null"
          @mouseleave="item.id !== 'contact' ? $event.target.style.color = '' : null">
          {{ item.name }}
        </a>
      </div>
    </div>
  </header>
</template>
